<template>
  <div class="smart-kitchen">
    <!-- 顶部导航栏 -->
    <header class="header">

      <div class="header-content">
        <img src="../../assets/返回1.svg" alt="返回" class="back-image" style="width: 20px; height: 20px;"
          @click="handleBack">
        <h1 class="title">智能厨房</h1>
        <div class="header-right">
          <span class="time">{{ currentTime }}</span>
          <i class="fas fa-cog setting-icon"></i>
        </div>
      </div>
    </header>
    <!-- 场景模式区 -->
    <section class="scene-section">
      <h2 class="section-title">场景模式</h2>
      <div class="scene-list">
        <div v-for="(scene, index) in scenes" :key="index" class="scene-card" :class="{ active: activeScene === index }"
          @click="switchScene(index)">
          <i :class="scene.icon"></i>
          <span>{{ scene.name }}</span>
        </div>
      </div>
    </section>
    <!-- 设备控制区 -->
    <section class="control-section">
      <h2 class="section-title">设备控制</h2>
      <div class="control-grid">
        <!-- 照明控制 -->
        <div class="control-card">
          <div class="card-header">
            <i class="fas fa-lightbulb"></i>
            <h3>厨房照明</h3>
          </div>
          <div class="card-body">
            <div class="light-control">
              <div class="switch-container">
                <label class="switch">
                  <input type="checkbox" v-model="lightStatus">
                  <span class="slider"></span>
                </label>
                <span>{{ lightStatus ? '开启' : '关闭' }}</span>
              </div>
              <div class="brightness-control">
                <div class="circular-progress">
                  <div class="progress-circle" :style="{ '--progress': lightBrightness }"></div>
                  <span>{{ lightBrightness }}%</span>
                </div>
                <input type="range" min="0" max="100" v-model="lightBrightness" class="brightness-slider">
              </div>
            </div>
          </div>
        </div>
        <!-- 温度控制 -->
        <div class="control-card">
          <div class="card-header">
            <i class="fas fa-thermometer-half"></i>
            <h3>厨房温度</h3>
          </div>
          <div class="card-body">
            <div class="temperature-control">
              <div class="current-temp">
                <span class="temp-value">{{ currentTemp }}°C</span>
                <span class="temp-status">{{ tempStatus }}</span>
              </div>
              <input type="range" min="16" max="30" v-model="currentTemp" class="temp-slider">
              <div class="temp-range">
                <span>16°C</span>
                <span>30°C</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 空调控制 -->
        <div class="control-card">
          <div class="card-header">
            <i class="fas fa-wind"></i>
            <h3>厨房空调</h3>
          </div>
          <div class="card-body">
            <div class="ac-control">
              <div class="switch-container">
                <label class="switch">
                  <input type="checkbox" v-model="acStatus">
                  <span class="slider"></span>
                </label>
                <span>{{ acStatus ? '开启' : '关闭' }}</span>
              </div>
              <div class="ac-mode">
                <div v-for="(mode, index) in acModes" :key="index" class="mode-btn"
                  :class="{ active: acCurrentMode === index }" @click="acCurrentMode = index">
                  {{ mode }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 其他设备 -->
        <div class="control-card">
          <div class="card-header">
            <i class="fas fa-blender"></i>
            <h3>厨房电器</h3>
          </div>
          <div class="card-body">
            <div class="appliance-control">
              <div class="appliance-item">
                <span>抽油烟机</span>
                <label class="switch">
                  <input type="checkbox" v-model="fanStatus">
                  <span class="slider"></span>
                </label>
              </div>
              <div class="appliance-item">
                <span>消毒柜</span>
                <label class="switch">
                  <input type="checkbox" v-model="disinfectorStatus">
                  <span class="slider"></span>
                </label>
              </div>
              <div class="appliance-item">
                <span>净水器</span>
                <label class="switch">
                  <input type="checkbox" v-model="waterPurifierStatus">
                  <span class="slider"></span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const handleBack = () => {
  router.push({ name: 'Home' });
};
// 当前时间
const currentTime = ref('');
const updateTime = () => {
  const now = new Date();
  currentTime.value = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
};
let timeInterval: number;
onMounted(() => {
  updateTime();
  // timeInterval = setInterval(updateTime, 1000);
});
onBeforeUnmount(() => {
  // clearInterval(timeInterval);
});
// 场景模式
const scenes = ref([
  { name: '早餐模式', icon: 'fas fa-coffee' },
  { name: '烹饪模式', icon: 'fas fa-utensils' },
  { name: '用餐模式', icon: 'fas fa-drumstick-bite' },
  { name: '清洁模式', icon: 'fas fa-broom' },
  { name: '节能模式', icon: 'fas fa-leaf' }
]);
const activeScene = ref(0);
const switchScene = (index: number) => {
  activeScene.value = index;
  // 根据场景切换设备状态
  switch (index) {
    case 0: // 早餐模式
      lightStatus.value = true;
      lightBrightness.value = 70;
      currentTemp.value = 22;
      acStatus.value = true;
      acCurrentMode.value = 1; // 舒适模式
      fanStatus.value = false;
      disinfectorStatus.value = false;
      waterPurifierStatus.value = true;
      break;
    case 1: // 烹饪模式
      lightStatus.value = true;
      lightBrightness.value = 100;
      currentTemp.value = 20;
      acStatus.value = true;
      acCurrentMode.value = 2; // 强劲模式
      fanStatus.value = true;
      disinfectorStatus.value = false;
      waterPurifierStatus.value = true;
      break;
    case 2: // 用餐模式
      lightStatus.value = true;
      lightBrightness.value = 80;
      currentTemp.value = 24;
      acStatus.value = true;
      acCurrentMode.value = 1; // 舒适模式
      fanStatus.value = false;
      disinfectorStatus.value = false;
      waterPurifierStatus.value = true;
      break;
    case 3: // 清洁模式
      lightStatus.value = true;
      lightBrightness.value = 100;
      currentTemp.value = 22;
      acStatus.value = false;
      fanStatus.value = true;
      disinfectorStatus.value = true;
      waterPurifierStatus.value = true;
      break;
    case 4: // 节能模式
      lightStatus.value = true;
      lightBrightness.value = 50;
      currentTemp.value = 18;
      acStatus.value = false;
      fanStatus.value = false;
      disinfectorStatus.value = false;
      waterPurifierStatus.value = true;
      break;
  }
};
// 照明控制
const lightStatus = ref(false);
const lightBrightness = ref(50);
// 温度控制
const currentTemp = ref(22);
const tempStatus = computed(() => {
  if (currentTemp.value < 20) return '较冷';
  if (currentTemp.value > 26) return '较热';
  return '舒适';
});
// 空调控制
const acStatus = ref(false);
const acModes = ['自动', '舒适', '强劲', '睡眠'];
const acCurrentMode = ref(0);
// 其他设备
const fanStatus = ref(false);
const disinfectorStatus = ref(false);
const waterPurifierStatus = ref(false);
</script>

<style scoped>
.smart-kitchen {
  min-height: 100vh;
  background-color: #F5F6FA;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: #333333;
  padding-bottom: 40px;
}

/* 顶部导航栏 */
.header {
  position: sticky;
  top: 0;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  height: 60px;
  z-index: 100;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.title {
  font-size: 20px;
  font-weight: 600;
  color: #4A90E2;
  margin: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.time {
  font-size: 16px;
  color: #666666;
}

.setting-icon {
  font-size: 18px;
  color: #666666;
  cursor: pointer;
  transition: color 0.2s;
}

.setting-icon:hover {
  color: #4A90E2;
}

/* 场景模式区 */
.section-title {
  font-size: 18px;
  font-weight: 600;
  margin: 30px 0 20px;
  padding-left: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.scene-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.scene-list::-webkit-scrollbar {
  display: none;
}

.scene-card {
  width: 100%;
  height: 100px;
  background-color: white;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.scene-card i {
  font-size: 24px;
  margin-bottom: 10px;
  color: #666666;
}

.scene-card span {
  font-size: 14px;
}

.scene-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.scene-card.active {
  background-color: #4A90E2;
  color: white;
}

.scene-card.active i {
  color: white;
}

/* 设备控制区 */
.control-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.control-card {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.control-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #F0F0F0;
}

.card-header i {
  font-size: 20px;
  color: #4A90E2;
  margin-right: 10px;
}

.card-header h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.card-body {
  padding: 20px;
}

/* 照明控制 */
.light-control {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.switch-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked+.slider {
  background-color: #2ECC71;
}

input:checked+.slider:before {
  transform: translateX(26px);
}

.brightness-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.circular-progress {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(#4A90E2 calc(var(--progress) * 3.6deg), #E0E0E0 0deg);
}

.progress-circle::before {
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  background: white;
  border-radius: 50%;
  top: 5px;
  left: 5px;
}

.circular-progress span {
  position: relative;
  font-size: 16px;
  font-weight: 600;
}

.brightness-slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: #E0E0E0;
  border-radius: 3px;
  outline: none;
}

.brightness-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4A90E2;
  cursor: pointer;
}

/* 温度控制 */
.temperature-control {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.current-temp {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.temp-value {
  font-size: 24px;
  font-weight: 600;
  color: #4A90E2;
}

.temp-status {
  font-size: 14px;
  color: #666666;
}

.temp-slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, #4A90E2, #E74C3C);
  border-radius: 3px;
  outline: none;
}

.temp-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  border: 2px solid #4A90E2;
  cursor: pointer;
}

.temp-range {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999999;
}

/* 空调控制 */
.ac-control {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ac-mode {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.mode-btn {
  padding: 8px 0;
  text-align: center;
  background-color: #F0F0F0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}

.mode-btn:hover {
  background-color: #E0E0E0;
}

.mode-btn.active {
  background-color: #4A90E2;
  color: white;
}

/* 其他设备 */
.appliance-control {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.appliance-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.appliance-item span {
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .scene-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .control-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .scene-card {
    height: 80px;
  }
}

@media (max-width: 480px) {
  .header-content {
    padding: 0 15px;
  }

  .scene-card {
    flex: 0 0 100px;
    height: 70px;
  }

  .scene-card i {
    font-size: 20px;
  }

  .scene-card span {
    font-size: 12px;
  }
}
</style>